<template>
  <div>
    <el-date-picker
      v-model="date"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right"
    >
    </el-date-picker>

    <el-button type="primary" class="el-icon-search" @click="clickSearch"
      >查询订单</el-button
    >
    <div class="title">订单统计</div>
    <div id="main" style="width: 1000px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { OrderTotal } from "../../../../api/apis";
import { getTime } from "../../../utils/utils";
export default {
  methods: {
    clickSearch() {
      let timestr = JSON.stringify([
        getTime(this.date[0]),
        getTime(this.date[1]),
      ]);
      this.refreshEchartData(timestr);
    },
    refreshEchartData(str) {
      OrderTotal(str).then((res) => {
        // console.log(res.data.data);[{},{}...]
        for (let obj of res.data.data) {
          // 转为标准时间
          obj.orderTime = getTime(obj.orderTime);
        }
        let arr = res.data.data;

        let option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: arr.map((item) => item.orderTime),
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "订单金额",
              type: "bar",
              barWidth: "60%",
              data: arr.map((item) => item.orderAmount),
            },
          ],
        };
        this.mychart.setOption(option);
      });
    },
  },
  data() {
    return {
      date: ["2019-10-01 00:00:00", "2020-10-10 00:00:00"], //当前选择的时间
    };
  },
  created() {
    this.refreshEchartData(JSON.stringify(this.date));
  },
  mounted() {
    this.mychart = echarts.init(document.getElementById("main"));
  },
};
</script>

<style lang="less" scoped>
.title {
  margin-top: 40px;
  font-size: 30px;
  color: #606266;
}
</style>